<template>
  <div class="home_footer" id="footerDiv">
    <!-- 业务 -->
    <div class="business_collection">
      <div class="hot_problem" @click="yhjyClick">
        <em class="iconfont icon-tousujianyi"/>
        <span>优化建议</span>
      </div>
      <div class="search_leaderboard" @click="versionClick">
        <em class="iconfont icon-banbenxinxi"/>
        <span>版本说明</span>
      </div>
      <div class="go_top" @click.stop="handleClickGoTop">
        <em class="iconfont icon-huidaodingbu"/>
        <span>顶部</span>
      </div>
      <div class="msg_clear" @click="handleClickMsgClear">
        <em class="iconfont icon-qingchu"/>
        <span>清屏</span>
      </div>

    </div>
    <!-- 发送问题 -->
    <div class="send_questions">
      <!-- 语音按钮 -->
      <div class="speech_btns">
        <!-- 语音 -->
        <div class="speech" v-show="!isSpeechMode" @click="handleClickSpeech">
          <em class="iconfont icon-yuyin" />
        </div>
        <!-- 键盘 -->
        <div class="keyboard" v-show="isSpeechMode" @click="handleClickKeyboard">
          <em class="iconfont icon-jianpan" />
        </div>
      </div>
      <!-- 输入框 -->
      <div class="inp_search" v-show="!isSpeechMode">
        <van-field v-model.trim="inputValue" id='inp' @keyup.enter='handleClickSend' @focus="handleFocusEvent" placeholder="请输入您的问题" />
      </div>
      <!-- 发送按钮 -->
      <div :class="['send_button',inputValue.length > 0 ? 'active_btn' : '']" v-show="!isSpeechMode" @click="handleClickSend">发送</div>
      <!-- 按住发送 语音 -->
      <div class="repress_send" v-show="isSpeechMode" @touchstart='handleTouchstart' @touchend='handleTouchend'>{{ repressSendText }}</div>
    </div>
  </div>
</template>

<script>
import {
  setCustomBubble,
  setQueryUserOrDeptAnswers,
  setTalkAnswers,
  clearMsg,
  setSearchTaskList, setSearchZS
} from '@/utils/setChatStoreData.js'
import slidingScrollBar from '@/utils/slidingScrollBar.js'
import {mapState} from "vuex";
import router from "@/router";

export default {
  name: 'HomeFooter',
  props: ['navList'],
  data() {
    return {
      inputValue: '',  //输入框数据绑定
      repressSendText: '按住  说话',  //按住发送文本切换
      isSpeechMode: false,   //是否显示语音模式
      footerDivTop: 0 // footerDiv top 坐标
    }
  },
  computed: {
    ...mapState(['rhPlate', 'userInfo']),
  },
  mounted() {
    // iphone 下面top需要计算出来,不然键盘弹出后,会对整个页面高进行改变,如果采用bottom=0方式的话,显示会出错.
    if (navigator.userAgent.includes('iPhone')) {
      const footerHeight = window.document.getElementById('footerDiv').offsetHeight;
      const screenHeight = window.innerHeight;
      this.footerDivTop = screenHeight - footerHeight;
      window.document.getElementById('footerDiv').style.top = `${this.footerDivTop}px`;
    } else {
      window.document.getElementById('footerDiv').style.position = 'fixed';
      window.document.getElementById('footerDiv').style.bottom = `0px`;
    }
  },
  methods: {
    async yhjyClick(){
      await router.push('/yhjy');
    },
    async versionClick(){
      await router.push('/version');
    },
    // 点击更多，显示快捷导航
    handleMore() {
      setCustomBubble(this, {
        "type": 'navList',
        "data": this.$store.state.quickNavList
      });
    },
    // 点击语音图标切换到发送语音模式
    handleClickSpeech() {
      this.isSpeechMode = true;
    },
    // 点击向上
    handleClickGoTop() {
      this.$store.state.datePickerShow = false;
      this.$nextTick(() => {
        slidingScrollBar(0,'smooth');
      })
    },
    // 点击清理消息
    handleClickMsgClear() {
      clearMsg(this);
    },
    // 点击键盘图标切换到输入文本模式
    handleClickKeyboard() {
      this.isSpeechMode = false;
    },
    // 发送按钮 发送输入文本内容
    handleClickSend() {
      // 不能发送超过50个字符的数据
      if (this.inputValue.length > 50) {
        this.$toast.fail("发送的内容不能超过50个字符");
        return;
      }

      // 智查模块 先查人员无数据再查组织
      if (this.inputValue.length > 0 && this.rhPlate === 'ZC') {
        setQueryUserOrDeptAnswers(this, this.inputValue);
        this.inputValue = '';
        return;
      }

      // 智办模块 查工单信息
      if (this.inputValue.length > 0 && this.rhPlate === 'ZB') {
        setSearchTaskList(this, this.inputValue);
        this.inputValue = '';
        return;
      }

      // 智说模块 查工单信息
      if (this.inputValue.length > 0 && this.rhPlate === 'ZS') {
        setSearchZS(this, this.inputValue);
        this.inputValue = '';
        return;
      }

      if (this.inputValue.length > 0) {
        setTalkAnswers(this, this.inputValue);
        this.inputValue = '';
      }
    },
    // 发送语音 按下事件
    handleTouchstart() {
      this.repressSendText = "松开  结束";
      this.startVoice(this.voiceSend);
    },
    // 发送语音 抬起事件
    handleTouchend() {
      this.repressSendText = "按住  说话";
      this.stopVoice();
    },
    /**
     * 开始启动语音录音功能
     * @param {*} successCallback  成功回调输入解析后的文本
     */
    startVoice: function (successCallback){
      try {
        cordova.plugins.mocha.plugin.audioToText.startRecord("startRecord", function(data){
          if(data){
            data=JSON.parse(data);
            if(data.hasOwnProperty('text')){
              if( data.text== undefined || data.text == ''){
                this.$toast.fail("对不起!没听清，请再说一遍!");
              }else if(successCallback) {
                successCallback(data.text);
              }
            }else if(!data.hasOwnProperty('isDisconnect') || !data.isDisconnect){
                this.$toast.fail("对不起!没听清，请再说一遍!");
            }
            if(data.isDisconnect){
              cordova.plugins.mocha.plugin.audioToText.disconnectWebSocket();
            }
          }else{
            this.$toast.fail("对不起!没听清，请再说一遍!");
          }
        },function(error){
          if(error == '无录音权限'){
            this.$toast.fail("对不起!您无录音权限!");
          }else{
            this.$toast.fail("启动录音错误"+error);
          }
          this.stopVoice();
          cordova.plugins.mocha.plugin.audioToText.disconnectWebSocket();
        });
      } catch (error) {
        this.$toast.fail("启动语音录音错误:"+error.message);
      }
    },
    /**
     * 停止语音录音功能
     */
    stopVoice: function (){
      try {
        cordova.plugins.mocha.plugin.audioToText.stopRecord("stopRecord",
          null,
          function(error){
            this.$toast.fail("停录音错误:"+error);
          });
      } catch (error) {
        this.$toast.fail("停止语音录音错误:"+error.message);
      }
    },
    voiceSend: function (text) {
      this.inputValue = text;
      this.handleClickSend();
    },
    // 输入框聚焦时，让底部菜单栏顶起
    handleFocusEvent() {
      if (navigator.userAgent.includes('iPhone')) {
        document.body.scrollTop = document.body.scrollHeight;
      } else {
        document.body.scrollIntoView();
      }
    },
    // handleBlurEvent() {
    //   if (navigator.userAgent.includes('iPhone')) {
    //     // 利用重现渲染页面的样式属性来解决软盘高度问题
    //     window.document.getElementById('footerDiv').style.top = `${this.footerDivTop}px`;
    //   }
    // }
  }
}
</script>

<style scoped>
@import url('~@/assets/css/home/homeFooter.css');
</style>
